<template>
    <div class="wrapper">
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
            <el-form-item label="角色名称"  style="width:50%"  prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="departmentId" class="width-per50" disabled>
                <el-input v-model="ruleForm.departmentName" disabled></el-input>
            </el-form-item>
            <el-form-item label="角色等级" prop="level" class="width-per50">
                <el-select v-model="ruleForm.level" placeholder="请选择角色等级" class="width-per100">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="说明"  style="width:50%">
                <el-input type="textarea" :rows="4" v-model="ruleForm.description"></el-input>
            </el-form-item>
            <div class="bottom-btn-pre">
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button  @click="exitForm('ruleForm')">取消</el-button>
            </div>
        </el-form>
    </div>
</template>


<script>

    import Vue from 'vue'
    import { mapActions } from 'vuex'
    import { Row,Table, form,button,checkbox,select,Option ,dialog,input,formItem,row,MessageBox,Message} from 'element-ui'

    Vue.use(Row);
    Vue.use(Table);
    Vue.use(form);
    Vue.use(button);
    Vue.use(checkbox);
    Vue.use(select);
    Vue.use(Option);
    Vue.use(dialog);
    Vue.use(input);
    Vue.use(formItem);
    Vue.use(row);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    level: '',
                    id: '',
                    departmentId: '',
                    description: ''

                },

                rules: {
                    name: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                    ],
                    level: [
                        { required: true, message: '请选择角色等级' }
                    ],
                    departmentId: [
                        { required: true, message: '请选择部门' }
                    ]
                }
            }
        },
        methods: {
            ...mapActions([
                'queryRole',
                'editRole'
            ]),
            submitForm(formName) {
                var _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.editRole(this.ruleForm).then(function (response) {
                            if(response.data.code === 0){
                                _this.$message('修改成功')
                                _this.$router.replace('/power/role-management')
                            }
                            else{
                                _this.$message('修改失败')
                            }
                        })
                    } else {
                        this.$message('修改失败');
                        return false;
                    }
                });
            },
            exitForm(formName) {
                var _this = this;
                this.$confirm('确定退出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$refs[formName].resetFields()
                    _this.$router.replace('/power/role-management')
                }).catch(() => {
                });
            }

        },

        created (){
            var _this = this;
            /*this.queryRole({'id':this.$route.params.id}).then((response) => {
                _this.ruleForm = response.data.data

            });*/
        }
    }
</script>
<style>
    .width-per50{width:50%;}
    .width-per100{width:100%;}
    .bottom-btn-pre{
        width:50%;
        display:table;
        text-align:center;
    }
</style>